import { computed, defineComponent, inject, reactive } from 'vue'
import { Popover } from '@arco-design/web-vue'
import { IconPen } from '@arco-design/web-vue/es/icon'
// todo: 引入 svgo 啊
import editBgImg from '@/assets/images/edit_bg_img.svg';
import iconDeleteImg from '@/assets/images/icon_delete_img.svg';
import EntityPopover from './EntityPopover'
import './entity.css'

export default defineComponent({
  name: 'Entity',
  inject: ["getGraph", "getNode"],
  setup: () => {
    const getGraph = inject('getGraph')
    const getNode: any = inject('getNode')
    const state = reactive(getNode().getData())
    const { onRemoveEvent, onEditEvent, ...rest } = state
    const removeEvent = () => {
      onRemoveEvent?.(rest)
    }
    const enditEvent = () => {
      onEditEvent?.(rest)
    }
    // todo: 判断逻辑 后面修改一下
    const isReal = computed(() => {
      return state.isRealTable
    })
    const realClass = isReal.value ? 'real-line' : '';
    // eslint-disable-next-line react/display-name
    return () => {
      return (
        // <Popover title="" position="right" v-slots={{
        //   content: () => (
        //    <EntityPopover data={rest} />
        //   ),
        // }}>
          <div class="entity">
            <div class="entityWrap">
              <div class={`entityWrap-line ${realClass}`}></div>
              <div class="entityWrap-body">
                <div class="entityWrap-body-title">
                  {isReal.value ? '事实表' : '维表'}
                </div>
                <div class="entityWrap-body-desc">
                  {state?.joinTableName || state?.tableName}
                </div>
              </div>
            </div>
            {/* <div class="entity-bottom">
              <div class="entity-bottom-icon" onClick={() => { enditEvent() }}>
                <img src={editBgImg} />
              </div>
              <div v-show={rest.allowDel} class="entity-bottom-icon" style={{ marginLeft: '12px' }} onClick={() => { removeEvent() }}>
                <img src={iconDeleteImg} />
              </div>
            </div> */}
          </div>
        // </Popover>
      )
    }
  },
})
